<script setup lang="ts">
import * as echarts from "Echarts";
import { onMounted, ref } from "vue";
import { tableBg } from "../../../utils/scss/color";
const charts = ref(null);
onMounted(() => {
  if (charts.value) {
    const myChart = echarts.init(charts.value);
    var dataArr = 44;
    var colorSet = {
      color: "#468EFD",
    };
    var option = {
      backgroundColor: tableBg,
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },

      series: [
        {
          name: "当前：",
          type: "gauge",
          // center: ['20%', '50%'],
          radius: "40%",

          splitNumber: 10,
          axisLine: {
            lineStyle: {
              color: [
                [dataArr / 100, colorSet.color],
                [1, "#111F42"],
              ],
              width: 8,
            },
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          itemStyle: {
            show: false,
          },
          detail: {
            formatter: function (value: number) {
              if (value !== 0) {
                var num = Math.round(value);
                return Number(num).toFixed(0) + "%";
              } else {
                return 0;
              }
            },
            offsetCenter: [0, 82],
            // textStyle: {
            padding: [0, 0, 0, 0],
            fontSize: 18,
            fontWeight: "700",
            color: colorSet.color,
            // },
          },
          title: {
            //标题
            show: true,
            offsetCenter: [0, 46], // x, y，单位px
            // textStyle: {
            color: "#fff",
            fontSize: 14, //表盘上的标题文字大小
            fontWeight: 400,
            fontFamily: "PingFangSC",
            // },
          },
          data: [
            {
              name: "功能开通",
              value: dataArr,
            },
          ],
          pointer: {
            show: true,
            length: "75%",
            radius: "20%",
            width: 10, //指针粗细
          },
          animationDuration: 4000,
        },
        {
          name: "外部刻度",
          type: "gauge",
          //  center: ['20%', '50%'],
          radius: "50%",
          min: 0, //最小刻度
          max: 100, //最大刻度
          splitNumber: 10, //刻度数量
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: [[1, "rgba(0,0,0,0)"]],
            },
          }, //仪表盘轴线
          axisLabel: {
            show: true,
            color: "#4d5bd1",
            distance: 25,
            formatter: function (v: string) {
              switch (v + "") {
                case "0":
                  return "0";
                case "10":
                  return "10";
                case "20":
                  return "20";
                case "30":
                  return "30";
                case "40":
                  return "40";
                case "50":
                  return "50";
                case "60":
                  return "60";
                case "70":
                  return "70";
                case "80":
                  return "80";
                case "90":
                  return "90";
                case "100":
                  return "100";
              }
            },
          }, //刻度标签。
          axisTick: {
            show: true,
            splitNumber: 7,
            lineStyle: {
              color: colorSet.color, //用颜色渐变函数不起作用
              width: 1,
            },
            length: -8,
          }, //刻度样式
          splitLine: {
            show: true,
            length: -20,
            lineStyle: {
              color: colorSet.color, //用颜色渐变函数不起作用
            },
          }, //分隔线样式
          detail: {
            show: false,
          },
          pointer: {
            show: false,
          },
        },
      ],
    };
    // Display the chart using the configuration items and data just specified.
    myChart.setOption(option);
  }
});
</script>

<template>
  <div class="charts" ref="charts" style="width: 600px; height: 400px"></div>
</template>

<style lang="scss" scoped></style>
